<template>
  <div class="content">
    <div class="skgmDiv">
      <TitleVue :name="'水库规模'" />
      <div class="skgmContent">
        <BarCharts :id="'skgmEcharts'" :xData="xData" :yData="yData" />
      </div>
    </div>
    <div class="krtjDiv">
      <TitleVue :name="'库容统计'" />
      <div class="krtjContent">
        <div class="modelOne">
          <div class="itemDiv">
            <span>实时总库容</span>
            <span>5199</span>
            <span>万m³</span>
          </div>
          <div class="itemDiv">
            <span>总库容</span>
            <span>6371</span>
            <span>万m³</span>
          </div>
        </div>
        <div class="modelTwo">
          <div class="itemDiv" v-for="(item, index) in krList" :key="index">
            <el-progress type="circle" :width="90" :percentage="item.percentage" :define-back-color="'#8d939b'" :text-color="'#fff'" :color="item.color"></el-progress>
            <div class="itemContent">
              <div>
                <span>{{ item.val }}</span
                >万m³
              </div>
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="sgjzDiv">
      <TitleVue :name="'水位变化'" />
      <div class="contentDiv">
        <div class="itemDiv" v-for="(item, index) in swbhList" :key="index">
          <img :src="require('@/assets/img/common/' + item.name + '.png')" alt="" />
          <div class="rightDiv">
            <p>水位{{ item.name }}</p>
            <p>{{ item.val }} {{ item.time }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="sssjDiv">
      <TitleVue :name="'实时数据'" />
      <div class="contentDiv">
        <el-tabs v-model="activeName">
          <el-tab-pane :label="'水位'" name="first">
            <InfiniteScroll :height="'100%'" :list="swList" :ths="swThs" />
          </el-tab-pane>
          <el-tab-pane :label="'雨量'" name="second">
            <InfiniteScroll :height="'100%'" :list="ylList" :ths="ylThs" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
import BarCharts from '../../components/echarts/barCharts2.vue'
import InfiniteScroll from '@/components/infiniteScroll/index.vue'

export default {
  name: 'ZlLeft',
  components: {
    TitleVue,
    BarCharts,
    InfiniteScroll
  },
  data() {
    return {
      xData: ['大型', '中型', '小Ⅰ型', '小Ⅱ型'],
      yData: [0, 1, 2, 1],
      krList: [
        {
          name: '大型水库',
          val: 0,
          percentage: 0,
          color: '#4685de'
        },
        {
          name: '中型水库',
          val: 1837,
          percentage: 35.33,
          color: '#35e9a0'
        },
        {
          name: '小型水库',
          val: 3362,
          percentage: 64.67,
          color: '#92fffb'
        }
      ],
      swbhList: [
        { name: '上升', val: 2, time: '个' },
        { name: '下降', val: 1, time: '个' },
        { name: '平稳', val: 1, time: '个' }
      ],
      activeName: 'first',
      swList: [
        {
          name: '蔡庄水库',
          value: '1106.46m',
          time: '05-16 12:00'
        },
        {
          name: '山南水库',
          value: '938.93m',
          time: '05-16 12:00'
        },
        {
          name: '石门水库',
          value: '869.24m',
          time: '05-15 12:00'
        },
        {
          name: '郑家庄水库',
          value: '752.69m',
          time: '05-15 12:00'
        }
      ],
      swThs: [
        { name: '水库名称', flex: 4, isCenter: true, property: 'name', isHighlight: false },
        { name: '实时水位', flex: 6, isCenter: true, property: 'value', isHighlight: false },
        { name: '采集时间', flex: 4, isCenter: true, property: 'time', isHighlight: false }
      ],
      ylThs: [
        { name: '水库名称', flex: 4, isCenter: true, property: 'name', isHighlight: false },
        { name: '雨量', flex: 6, isCenter: true, property: 'value', isHighlight: false },
        { name: '时间', flex: 4, isCenter: true, property: 'time', isHighlight: false }
      ],
      ylList: [
        {
          name: '蔡庄水库',
          value: '0mm',
          time: '05-16 12:00'
        },
        {
          name: '山南水库',
          value: '0mm',
          time: '05-16 12:00'
        },
        {
          name: '石门水库',
          value: '0mm',
          time: '05-15 12:00'
        },
        {
          name: '郑家庄水库',
          value: '0mm',
          time: '05-15 12:00'
        }
      ]
    }
  },
  mounted() {
    this.swList.forEach((item, index) => {
      item.time = this.deleteMinutes(new Date(), 0.5)
    })
    this.ylList.forEach((item, index) => {
      item.time = this.deleteMinutes(new Date(), 1)
    })
  },
  methods: {
    deleteMinutes(date, day) {
      var time = null
      time = this.parseTime(new Date(date.getTime() - day * 60000 * 60 * 24)).substr(5, 11)
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .skgmDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .skgmContent {
      width: 100%;
      height: 15vh;
    }
  }
  .krtjDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .krtjContent {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      .modelOne {
        width: 100%;
        height: auto;
        padding: 0 0.8vh;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .itemDiv {
          display: flex;
          align-items: baseline;
          span:nth-child(1),
          span:nth-child(3) {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 1.7vh;
            color: #fff;
          }
          span:nth-child(2) {
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 3vh;
            color: #fff;
          }
          span:nth-child(1) {
            display: block;
            margin-right: 1vh;
          }
          span:nth-child(3) {
            font-size: 1.5vh;
          }
        }
      }
      .modelTwo {
        width: 100%;
        height: auto;
        padding: 1vh;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .itemDiv {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 1.7vh;
          color: #fff;
          ::v-deep .el-progress__text {
            font-size: 2vh !important;
            font-family: Source Han Sans CN;
            font-weight: 400;
          }
          .itemContent {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            div:nth-child(1) {
              span {
                font-family: YouSheBiaoTiHei;
                font-weight: 400;
                font-size: 2.5vh;
              }
            }
          }
        }
      }
    }
  }
  .sgjzDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .contentDiv {
      width: 100%;
      height: auto;
      padding: 0vh 0.5vw;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .itemDiv {
        width: auto;
        display: flex;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 1.5vh;
        color: #00ffff;
        .rightDiv {
          margin-left: 5px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          p:nth-child(1) {
            font-size: 1.7vh;
            padding-left: 5px;
            margin-bottom: 5px;
            background: linear-gradient(to right, #0565a7, transparent);
          }
        }
      }
    }
  }
  .sssjDiv {
    flex: 1;
    width: 100%;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    .contentDiv {
      flex: 1;
      padding: 0 2vh 1vh;
      box-sizing: border-box;
      display: flex;
      overflow: auto;
      ::v-deep .el-tabs {
        flex: 1;
        display: flex;
        flex-direction: column;
        .el-tabs__item {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 1.7vh;
          color: #fff;
        }
        .el-tabs__content {
          flex: 1;
          width: 100%;
          height: 100%;
          overflow: auto;
        }
        .el-tabs__content::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }
}
</style>
